<template>
    <div class="tao-card">
        <router-link to="/" class="tao-card-pic">
            <img :src="item.imgUrl" alt="">
            <div class="tao-card-hide">
                <p style="text-overflow:ellipsis;" :title="item.itemName">{{item.itemName}}</p>
                <p>{{item.startTime}}</p>
            </div>
        </router-link>
        <p class="tao-card-title">{{item.itemName}}</p>
        <p class="tao-card-price"><span>票价：</span>￥{{item.minPrice}}</p>
    </div>
</template>
<script setup>
    import {reactive} from "vue"
        const props = defineProps({
        item:{
            type:Object
        }
    });
</script>
<style>
    .tao-tao-card{
        width: 146px;
        background: none;
    }
    .tao-card-pic{
        width: 146px;
        height: 192px;
        display: inline-block;
        position: relative;
    }
    .tao-card-pic:hover .tao-card-hide{
        display: block;
    }
    .tao-card-pic img{
        width: 146px;
        height: 192px;
    }
    .tao-card-hide{
        width: 146px;
        padding: 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #fff;
        background-color: rgba(202, 61, 34, 0.9);
        position: absolute;
        left: 0;
        bottom: 0;
        display: none;
    }
    .tao-card-hide p{
        margin: 0;
        width: 126px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
        line-height: 24px;
        padding-left: 18px;
        padding-right: 2px;
    }
    .tao-card-hide p:first-child{
        background: transparent url() 0 center no-repeat;
    }
    .tao-card-hide p:last-child{
        background: transparent url() 0 center no-repeat;
    }
    .tao-card-title{
        font-size: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width:146px;
        padding: 12px 2px 6px;
    }
    .tao-card-price{
        padding: 2px;
    }
</style>